<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 将用户输入的内容进行反转  abc  cbc-->
			计算:<input type="text" v-model="msg" />
			<!-- 将字符串拆分为数组split(""),将数组逆序排列reverse(),拼成字符串join("") -->
		<!-- {{msg.split("").reverse().join("")}} -->
		<!-- 为了简化插值表达式，可以把计算过程保存在计算属性中 -->
			{{reverseStr}}
			{{reverseStr}}
			{{reverseStr}}
			{{reverseA()}}
			{{reverseA()}}
			<!-- 计算属性与方法的区别
			 1.计算属性有缓存的操作，只执行一次，效率更高
			 2.计算属性调用时，只需要写属性名称
			 3.用户每次调用都会执行方法，没有缓存操作
			 4.方法调用时要加xxx()-->
		</div>
		<script src="../js/vue.js">	
		</script>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					msg:"",
					
					// 不能写null
				},
				methods:{	
					reverseA(){
						console.log("方法调用")
						return this.msg.split("").reverse().join("")
					}
				},
				// 定义计算属性
				computed:{
					// 必须有返回值
					reverseStr(){
						console.log("属性调用")
						return this.msg.split("").reverse().join("")
					}
				}
			})
			
		</script>
	</body>
</html>
